<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body {
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  svg {
    width: 100px;
  }
</style>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
    <defs>
      <style type="text/css">
        @keyframes draw {
          100% {
            stroke-dashoffset: 0
          }
        }

        path {
          animation: draw 2s ease-in-out infinite
        }
      </style>
      <clipPath id="hc">
        <path
          d="M 191 207 C 162 162 112 54 51 70 C -22 121 143 314 188 356 C 234 303 400 157 352 88 C 324 54 214 171 191 207 Z " />
      </clipPath>
    </defs>
    <path fill="none" stroke="#DA72B2" stroke-width="44" stroke-linecap="round" stroke-dasharray="3703"
      stroke-dashoffset="3703" clip-path="url(#hc)"
      d="M 120 0 C 88 77 -2 154 3 160 C 8 166 182 47 189 57 C 196 67 2 223 7 228 C 12 233 183 98 192 109 C 201 120 24 280 31 289 C 38 298 349 44 356 53 C 363 62 73 310 88 329 C 304 201 387 88 383 85 C 379 82 112 361 121 370 C 130 379 348 162 356 171">
    </path>
  </svg>
</body>

</html>